
const path = require('path') // path是Nodejs中的基本包,用来处理路径
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
// const ExtractPlugin = require("extract-text-webpack-plugin")

const isDev = process.env.NODE_ENV === 'development'

const config = {
  target: 'web', // 在全局加入编译目标：web平台
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(vue|js|jsx)$/,
        loader: 'eslint-loader',
        exclude: /node_module/,
        enforce: 'pre'
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new VueLoaderPlugin(),
    new HTMLPlugin()
  ]
}

// 开发测试环境
if (isDev) {
  // 开启调试工具
  config.devtool = '#cheap-module-eval-source-map'

  // 在config上加一个devServer配置
  config.devServer = {
    port: 8000,
    host: '127.0.0.1',
    // 错误信息直接显示在页面
    overlay: {
      errors: true
    },
    hot: true // 启动热加载
    // open: true // 更新webpack文件自动打开一个新的web
  }

  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
} else {
  config.output.filename = '[name].[chunkhash:8].js'
  config.entry = {
    app: path.join(__dirname, 'src/index.js'),
    vendor: ['vue']
  }
  config.plugins.push(

  )
}

module.exports = config
